/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
getNickName()
getChanList()
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
const img = document.querySelector(".img-file")
img.addEventListener("change",async e=>{
    const file = e.target.files[0]
    const fd = new FormData()
    fd.append('image',file)
    const {data:{data:{url}}} = await axios({
        method:'post',
        url: ('/v1_0/upload'),
        data: fd
    })
    url?document.querySelector('.rounded').src = url:''
    document.querySelector('.rounded').classList.add('show')
    document.querySelector('.place').classList.add('hide')
    
})
document.querySelector(".rounded").addEventListener('click',e=>{
    document.querySelector('.place').click()
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector(".send").addEventListener('click',async e=>{
    const form = document.querySelector('.art-form')
    const data = serialize(form,{hash:true,empty:true})
    data.cover = {
        type : 1,
        images : [document.querySelector('.rounded').src]
    }
    data.id = id
    if(e.target.innerHTML == '发布'){
        try{
            const res = await axios({
                    url : '/v1_0/mp/articles',
                    method : 'post',
                    data:data
            })
            console.log(res);
            alert("发布成功")
            form.reset()
            document.querySelector('.rounded').classList.remove('show')
            document.querySelector('.place').classList.remove('hide')
            editor.setHtml('')
            setTimeout(() => {
                location.href = '../content/index.html'
            }, 1500);
        }catch(error){
            alert(error.response.data.message)
        }
    }else{
        console.log(data);
        try{
            const res = await axios({
                    url : `/v1_0/mp/articles/${data.id}`,
                    method : 'PUT',
                    data : data
            })
            console.log(res);
            alert("保存成功")
            form.reset()
            document.querySelector('.rounded').classList.remove('show')
            document.querySelector('.place').classList.remove('hide')
            editor.setHtml('')
            setTimeout(() => {
                location.href = '../content/index.html'
            }, 1000);
        }catch(error){
            alert(error.response.data.message)
        }
    }
    
})
/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
const paramsStr = location.search
const params = new URLSearchParams(paramsStr)
let id
params.forEach(async (value,key)=>{
    if(key === 'id'){
        id = value
        document.querySelector('.title').innerHTML = `<span>修改文章</span>`
        document.querySelector('.send').innerHTML = '修改'
        const {data:{data:res}} = await axios({
            url : `v1_0/mp/articles/${id}`
        })
        document.querySelector('#title').value = res.title
        document.querySelector('.rounded').src = res.cover.images[0]
        document.querySelector('.rounded').classList.add('show')
        document.querySelector('.place').classList.add('hide')
        editor.setHtml(res.content)
        setTimeout(() => {
            document.querySelector(`option[value='${res.channel_id}']`).selected = true
        }, 500);
    }   
})
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */

